import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { ArrowsAltOutlined, ShrinkOutlined } from '@ant-design/icons/lib'

interface IImgViewProps {
    img: any
    width: any
    height: any
}

export default function ImgView(props: IImgViewProps) {
    const [state, setState] = useState<any>()
    const [imgState, setImgState] = useState(false)
    const [width, setWidth] = useState<any>()
    const [height, setHeight] = useState<any>()

    useEffect(() => {
        if (props.width >= props.height) {
            setWidth('100%')
            setState('width')
        } else if (props.width < props.height) {
            setHeight('100%')
            setState('height')
        }
    }, [props.width, props.height])

    const handInBtnClick = () => {
        const img = $('#modal__img')
        img.removeClass('width')
        img.removeClass('height')
        img.removeClass('equal')

        if (!imgState) {
            img.addClass('in')
            $('#img__view').addClass('in')
        } else {
            img.removeClass('in')
            $('#img__view').removeClass('in')
            img.addClass(state)
        }
    }

    return (
        <div
            id="img__view"
            className={style.container}
            style={{
                ['--width-' as any]: width,
                ['--height-' as any]: height
            }}>
            <div
                id="modal__img"
                className={`${style.img} ${state}`}
                onClick={() => {
                    setImgState(!imgState)
                    handInBtnClick()
                }}>
                {imgState ? <ShrinkOutlined className={style.icon} /> : <ArrowsAltOutlined className={style.icon} />}
                <img src={props.img} />
            </div>
        </div>
    )
}
